<template>
  <div class="recipe-app">
    <!-- 顶部标题区 -->
    <van-nav-bar
      class="app-header"
      left-text="小白菜谱"
      
    >
      <template #title>
        <span class="subtitle">小白学做菜必备的烹饪菜谱</span>
      </template>
    </van-nav-bar>

    <!-- 搜索 -->
    <van-search
      v-model="keyword"
      shape="round"
      placeholder="小白菜谱共有10001道菜任你选择"
      class="search-bar"
      @click="goToSearchPage"
    />

  
  <!-- Vant 组件 -->
  <van-image
    width="100%"
    fit="contain"
    src="\src\assets\img\home.jpg"
  />
    <!-- 菜系分类 -->
    <section class="section">
      <van-grid :column-num="5" :gutter="10">
        <van-grid-item
          v-for="item in categories.slice(0,10)"
          :key="item"
          :text="item"
          class="category-item"
          @click="goToCategory"
        />
      </van-grid>
    </section>

    <!-- 精品好菜 -->
   <div class="featured-recipes">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="精品好菜"
    />
    <!-- 菜品列表 -->
    <van-list
      class="recipe-list"
      :finished="true"
    >
      <van-card
        v-for="item in recipes.slice(0,6)"
        :key="item.id"
        :thumb="item.imageUrl"
        :title="item.title"
        @click="goToRecipeDetail(item)"
      >
    <template #desc>
    <div class="multi-line-desc">{{ item.description }}</div>
  </template>
    </van-card>
    </van-list>
  </div>
  </div>
</template>

<script setup name="Home">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getRecommendRecipeAll,getMainCategories } from '../api/index'

const router=useRouter()
const keyword = ref('')

// 跳转到菜谱详情页
function goToRecipeDetail(item) {
  router.push({
    name: 'recipe_datail',
    query: { recipeId: item.recipeId }  // 使用 query 传递 id
  })
}


// 跳转到分类页面
const goToCategory = () => {
  router.push({
    name:"category_homepage"
  })
}
//跳转搜索页面
const goToSearchPage = () => {
  router.push('/search');
};



const categories = ref([

])

const fetchCategories = async () => {
    const data = await getMainCategories();
    categories.value = data.map(item => item.mainCategoryName);
   
    // 如果数组长度>=10，替换第10个元素（索引9）
    if (categories.value.length >= 10) {
        categories.value.splice(9, 1, "全部分类");
    } else {
        // 如果不足10个，直接添加"全部分类"
        categories.value.push("全部分类");
    }
};



const recipes = ref([
])
const recipeList = async () => {
  try {
    recipes.value = await getRecommendRecipeAll()
    // console.log("获取到的食谱数据:", recipes.value)
  } catch (error) {
    console.error("获取食谱失败:", error)
  }
}
onMounted(()=>{
  recipeList()
  fetchCategories()
})



</script>

<style scoped>
/* 全局移动端适配 */
html {
  font-size: 16px;
}

/* 页面底色 */
.recipe-app {
  background: #f8f8f8;
  min-height: 100vh;
}

/* 顶部标题 */
.app-header {
  background: linear-gradient(135deg, #fffefe 0%, #ffffff 100%);
  color: #0a0a0a;
}
.subtitle {
  font-size: 3.8vw; /* 14px ≈ 3.8vw @375px */
}

/* 搜索框 */
.search-bar {
  margin: 0 0 3vw;
}

/* 宫格自适应 */
.category-item {
  font-size: 3.7vw; /* 14px ≈ 3.7vw */
}

/* 精品好菜卡片 */
.featured-recipes {
  background: #fff;
  padding: 0 4vw 4vw;
}

.recipe-list {
  padding: 0 0;
}

.recipe-card {
  background: #fff;
  border-radius: 3vw;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}
.recipe-card:active {
  transform: scale(0.97);
}

.recipe-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* 保持 4:3 比例 */
  object-fit: cover;
  display: block;
}

.recipe-name {
  padding: 2.5vw 3vw;
  font-size: 4.3vw; /* 16px ≈ 4.3vw */
  font-weight: 600;
  line-height: 1.3;
  /* 最多 2 行，超出... */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.multi-line-desc {
  font-size: 3.5vw;
  line-height: 1.4;
  color: #666;
  margin-top: 1vw;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 大屏最大宽度限制（可选） */
@media (min-width: 600px) {
  .recipe-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
</style>
